<template>
  <div class="main">
    <router-view></router-view>
    <div class="content">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane v-for="(tab, index) in tabs" :key="tab.name" :label="tab.name">
          <component :is="tab.component"></component>
          <span class="close-icon" @click.middle="closeTab(index)">x</span>
          <div class="right-menu" v-if="visibleRightMenu" :style="rightMenuStyle">
            <div class="menu-item" @click="closeAll">关闭所有</div>
            <div class="menu-item" @click="closeOthers(index)">关闭其他</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style>
#app {
  width: 100%;
  height: 100vh;
}
</style>

<script>
export default {
  data() {
    return {
      tabs: [],
      activeTab: null,
      visibleRightMenu: false,
      rightMenuStyle: {
        left: 0,
        top: 0  
      }
    }
  },
  methods: {
    addTab(tab) {
      this.tabs.push(tab);
    },
    closeAll() {
      this.tabs = [];  
    },
    closeOthers(index) {
      this.tabs = [this.tabs[index]];
    },
    closeTab(index) {
      this.tabs.splice(index, 1);
    },
    handleContextMenu(e) {
      this.visibleRightMenu = true;
      this.rightMenuStyle.left = e.clientX + 'px';
      this.rightMenuStyle.top = e.clientY + 'px';
    },
    closeRightMenu() {
      this.visibleRightMenu = false;  
    }
  }
}
</script>
